<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8" />
<%--  <link rel="stylesheet" href="css/jpetstore.css" type="text/css" media="screen"/>--%>
<%--  <link rel="stylesheet" href="css/hello.css" type="text/css" media="screen" />--%>
  <link rel="stylesheet" href="css/Main.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="css/cart.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="css/signOn.css" type="text/css" media="screen" />

  <title>JPetStore Demo</title>
  <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
  <script src="js/gVerify.js"></script>
  <script src="js/productAuto.js"></script>
</head>

<body>
<%--<div id="Header">--%>

<%--  <div id="Logo">--%>
<%--    <div id="LogoContent">--%>
<%--      <a href="main"><img src="images/logo-topbar.gif"/></a>--%>
<%--    </div>--%>
<%--  </div>--%>

<%--  <div id="Menu">--%>
<%--    <div id="MenuContent">--%>
<%--      <a href="cartForm"><img align="middle" name="img_cart" src="images/cart.gif"/></a>--%>
<%--      &lt;%&ndash;        分隔符&ndash;%&gt;--%>
<%--      <img align="middle" src="images/separator.gif" />--%>
<%--      <c:if test="${sessionScope.loginAccount == null}">--%>
<%--        <a href="signonForm">Sign In</a>--%>
<%--        <img align="middle" src="images/separator.gif" />--%>
<%--      </c:if>--%>
<%--      <c:if test="${sessionScope.loginAccount != null}">--%>
<%--        <a href="signOut">Sign Out</a>--%>
<%--        <img align="middle" src="images/separator.gif" />--%>
<%--        <a href="updateAccountForm">My Account</a>--%>
<%--        <img align="middle" src="images/separator.gif" />--%>
<%--      </c:if>--%>
<%--      <a href="help.html">?</a>--%>
<%--    </div>--%>
<%--  </div>--%>

<%--  <div id="Search">--%>
<%--    <div id="SearchContent">--%>
<%--      <form action="searchFormServlet" method="post">--%>
<%--        <input type="text" name="keyword" size="14">--%>
<%--        <input type="submit" name="searchProducts" value="Search">--%>
<%--      </form>--%>
<%--    </div>--%>
<%--  </div>--%>

<%--  <div id="QuickLinks">--%>
<%--    <a href="categoryForm?categoryId=FISH"><img src="images/sm_fish.gif" /></a>--%>
<%--    <img src="images/separator.gif" />--%>
<%--    <a href="categoryForm?categoryId=DOGS"><img src="images/sm_dogs.gif" /></a>--%>
<%--    <img src="images/separator.gif" />--%>
<%--    <a href="categoryForm?categoryId=REPTILES"><img src="images/sm_reptiles.gif" /></a>--%>
<%--    <img src="images/separator.gif" />--%>
<%--    <a href="categoryForm?categoryId=CATS"><img src="images/sm_cats.gif" /></a>--%>
<%--    <img src="images/separator.gif" />--%>
<%--    <a href="categoryForm?categoryId=BIRDS"><img src="images/sm_birds.gif" /></a>--%>
<%--  </div>--%>

<%--</div>--%>
<div class="nav-top">
  <div class="w">
    <div class="user-info">
      <span class="user not-login">
        <!-- 此处作为jsp判断的第一个地方，判断是否已经登录 -->
        <c:if test="${sessionScope.loginAccount == null}">
          <span class="link">
            <a href="signonForm">登录</a>
          </span>
        </c:if>
        <c:if test="${sessionScope.loginAccount != null}">
          <span class="link">
            <a href="signOut">退出登录</a>
          </span>
        </c:if>
        <span class="link">
          <a href="registerForm">注册</a>
        </span>
      </span>
<%--      <span class="user login">--%>
<%--        <span class="link-text">--%>
<%--          <!-- 此处作为第二个jsp判断的地方 -->--%>
<%--          <!-- 欢迎您,<span class="username">XXX</span> -->--%>
<%--          <c:if test="${sessionScope.loginAccount != null}">--%>
<%--            <span class="username">--%>
<%--              欢迎您,${sessionScope.loginAccount.username}--%>
<%--            </span>--%>
<%--          </c:if>--%>
<%--        </span>--%>
<%--      </span>--%>
    </div>
    <ul class="nav-top-list">
      <li class="nav-top-item">
        <a href="cartForm" class="link">
          <i class="fa fa-shopping-cart"></i>
          购物车
          <!-- 下面也是修改购物车的内容，读取有几件商品就改成几 -->
<%--          (<span>0</span>)--%>
        </a>
      </li>
      <c:if test="${sessionScope.loginAccount != null}">
        <li class="nav-top-item">
          <a href="updateAccountForm">个人中心</a>
        </li>
      </c:if>
      <li class="nav-top-item">
        <a href="help.html" class="link">关于mystore</a>
      </li>
    </ul>
  </div>
</div>

<div class="nav-search">
  <div class="w">
    <!-- 此处也可以考虑贴图在这里 -->
    <a href="main" class="link logo">MyStore</a>
    <div class="search-content">
      <label>
        <input type="text" class="search-input" placeholder="请输入商品名称" id="keyword"/>
      </label>
      <button class="btn search-btn">搜索</button>

    </div>

  </div>
  <div id="productAutoComplete">
    <ul id="productAutoList">

    </ul>
  </div>
</div>

<div id="Content">
